$black: #3e3e3e;
$line: #cac8c8;
body {
    background: #efeff4;
    color: $black;
    font-size: 13px;
    box-sizing: border-box;
    // padding-bottom: 60px;
}

.tieba-item {
    border-top: 1px solid $line;
    border-bottom: 1px solid $line;
    padding: 15px 10px;
    display: flex;
    background: #fff;
    >img {
        width: 40px;
        height: 40px;
        border: 1px solid #fff;
    }
    >div {
        margin-left: 10px;
        flex: 1;
        h2 {
            color: #eb2929;
            margin: 10px 0;
            span {
                float: right;
                color: #999;
            }
        }
        p {
            line-height: 18px;
        }
        ul {
            padding-top: 10px;
            overflow: hidden;
        }
        li {
            float: left;
            width: calc((100% - 45px) / 3);
            margin-right: 15px;
            img {
                width: 100%;
            }
        }
        div {
            padding-top: 10px;
            font-size: 12px;
            float: right;
            span {
                float: left;
                margin: 0 10px;
            }
            i {
                float: left;
            }
        }
    }
}

.block {
    height: 10px;
    background: #efeff4;
}

#letter {
    z-index: 9999;
    background: rgba(3, 3, 3, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .main {
        border-radius: 5px;
        background: white;
        position: relative;
        margin: 50% 15px 0 15px;
        >i {
            width: 28px;
            height: 28px;
            box-shadow: 0px 2px 4px #aaaaaa;
            text-align: center;
            position: absolute;
            left: 50%;
            margin-left: -14px;
            top: -14px;
            background: white;
            color: #e9165b;
            line-height: 28px;
            border-radius: 50%;
        }
        .content {
            color: #7c7b7b;
            padding: 20px 25px;
            border-bottom: 1px solid #e2e2e2;
            h2 {
                margin-bottom: 5px;
            }
            .controls {
                overflow: hidden;
                margin-bottom: 15px;
                display: flex;
                span {
                    width: 45px;
                }
                input {
                    height: 22px;
                    padding: 0 10px;
                }
                textarea {
                    height: 100px;
                    border: none;
                }
                input,
                textarea {
                    flex: 1;
                    background: #E3E3E3;
                }
            }
        }
        .modal-footer {
            overflow: hidden;
            a {
                width: 50%;
                height: 35px;
                float: left;
                line-height: 35px;
                text-align: center;
            }
            a:last-child {
                color: #e80f56;
                border-left: 1px solid #e2e2e2;
            }
        }
    }
}
